<div class="big-icon">
  <img src="/assets/img/logo_password_catcher_color_2x_web_96dp.png" />
</div>
<h1 class="wizard-title text-center"><b>{{'recoverScreenTitle' | translate}}</b></h1>

 <div class="col-xs-12 lead row recover-help text-center">{{'recoverHelp' | translate}}</div>

<form name="theform">
  <div class="recover-box center-block">
   <div class="lead info-format">{{'recoveryCodeInput' | translate}}</div>
    <div class="text-center clearfix">
      <input id="rcode1" type="text" name="thecode" class="form-control sm-disable-animation input-box" maxlength="5"
      ng-model="recoverCtrl.recoveryCode1" required="true"
      ng-pattern="recoverCtrl.REGEX_BASE58"/>

      <input id="rcode2" type="text" name="thecode" class="form-control sm-disable-animation input-box" maxlength="5"
      ng-model="recoverCtrl.recoveryCode2" required="true"
      ng-pattern="recoverCtrl.REGEX_BASE58"/>

      <input id="rcode3" type="text" name="thecode" class="form-control sm-disable-animation input-box" maxlength="5"
      ng-model="recoverCtrl.recoveryCode3" required="true"
      ng-pattern="recoverCtrl.REGEX_BASE58"/>

      <input id="rcode4" type="text" name="thecode" class="form-control sm-disable-animation input-box" maxlength="5"
      ng-model="recoverCtrl.recoveryCode4" required="true"
      ng-pattern="recoverCtrl.REGEX_BASE58"/>

      <input id="rcode5" type="text" name="thecode" class="form-control sm-disable-animation input-box" maxlength="5"
      ng-model="recoverCtrl.recoveryCode5" required="true"
      ng-pattern="recoverCtrl.REGEX_BASE58"/>
    </div>
    <span class="text-warning"
    ng-class="{'just-hide': !theform.thecode.$error.pattern}">{{'incorrectCodeStatus' | translate}}</span>

  </div>
  <div class="col-xs-12 resetbtn row">
    <button class="btn btn-link btn-focus" data-ng-click="recoverCtrl.reset()">{{'resetLink' | translate}}</button>
  </div>
  <div class="col-xs-12 row">
    <button id="6" ng-disabled="theform.thecode.$error.pattern || theform.thecode.$error.required || recoverCtrl.status" class="btn btn-primary btn-focus" data-ng-click="recoverCtrl.unlock()">{{'recover' | translate}}</button>

  </div>
</form>

<div class="row">
  <div class="col-xs-12">
    <span class="text-info fade-show"
    ng-show="recoverCtrl.status">{{recoverCtrl.status}}</span>
  </div>
</div>

<div class="row">
  <div class="col-xs-12">
    <span class="text-danger fade-show"
    ng-show="recoverCtrl.errors">{{recoverCtrl.errors}}</span>
  </div>
</div>
